<template>
	<view style="background-color: #f7f7f7;">
		<view class="title" >
			<image src="../../../static/车联网服务-08我的-05我的车辆添加_slices/箭头.png" @click="back"></image>
			<view>消费记录</view>
		</view>
		<view class="body">
			<view v-for="item,index in shuzu" :key="index">
				<view class="body-1" >
					<view>
						<!-- <view>{{item.shopname}}-{{item.service_type}}</view>
						<view class="v1">{{formatDate(item.hexiao_time)}}</view> -->
						<view>大美汽车维修点-洗车</view>
						<view class="v1">2023.3.11  11：09</view>
					</view>
					<!-- <view class="v2">-{{item.pay_price}}元</view> -->
					<view class="v2">-50元</view>
				</view>
				<view class="body-2" v-if="shuzu.length-1!=index"></view>
			</view>
		</view>
	</view>

</template>

<script>
import request from 'utils/api.js'
	export default {
		data() {
			return {
				id:null,
				shuzu:[]
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			//获取用户消费信息
		 	async priceAll(){
				const res = await request({
					url:`/order/priceAll?id=${this.id}`
				});
				this.shuzu=res;
				console.log(this.shuzu);
			},
			//日期格式处理
			formatDate(date) {
			    const d = new Date(date);
			    const year = d.getFullYear();
			    const month = (d.getMonth() + 1).toString().padStart(2, '0');
			    const day = d.getDate().toString().padStart(2, '0');
				const hours = d.getHours().toString().padStart(2, '0'); // 获取小时并补零
				const minutes = d.getMinutes().toString().padStart(2, '0'); // 获取分钟并补零
				const seconds = d.getSeconds().toString().padStart(2, '0'); // 获取秒数并补零
			    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			  },
		},
		onLoad(option){
			this.id=option.id;
			this.priceAll();
		}
	}
</script>

<style lang="scss">
	.title {
		background-image: url('../../../static/车联网服务-00首页_slices/图层 1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 350rpx;
		display: flex;
		padding: 60rpx 300rpx 40rpx 30rpx;
		justify-content: space-between;
		image{
			color: white;
			width: 35rpx;
			height: 35rpx;
		}
		view{
			color: white;
		}
	}
	.body{
		width: 82%;
		margin: -300rpx auto;
		border-radius: 20rpx;
		padding: 40rpx;
		background-color: #ffffff;
		.body-1{
			display: flex;
			justify-content: space-between;
			height: 120rpx;
			
			.v1{
				font-size: 30rpx;
				margin-top: 20rpx;
				color: #a4a4a4;
			}
			.v2{
				margin-top: 20rpx;
			}
		}
		.body-2{
			width: 100%;
			height: 5rpx;
			margin: 30rpx auto;
			background-color: #e9e9e9;
		}
	}
</style>